<script setup lang="ts">
import { saveServicePackageConfig } from '@/api';
import { useCareStore } from '@/store';
import type { MutipleType, ServiceTagConfig } from '@/types';
import { message } from 'ant-design-vue';
import { storeToRefs } from 'pinia';
import { isEmpty } from 'radash';
import { ref, watch } from 'vue';
import ServiceContent from './config-service-content.vue';

const { levels } = storeToRefs(useCareStore());

const props = defineProps<{
	level?: MutipleType;
	id?: MutipleType;
}>();

const emit = defineEmits(['save']);

watch(() => props.level, (val) => {
	if (isEmpty(val)) return;
	currentLevel.value = String(val);
}, {
	immediate: true,
});

const currentLevel = ref('');
const open = ref(false);
const serviceContent = ref<ServiceTagConfig[]>([]);

const oepnConfig = () => {
	open.value = true;
};

const getServiceContent = (configs: ServiceTagConfig[]) => {
	serviceContent.value = configs;
}

const savaConfig = () => {
	if (isEmpty(props.id)) return;
	const params = {
		levelID: Number(currentLevel.value),
		packageSettings: serviceContent.value,
	};
	saveServicePackageConfig(props.id as number, params).then(() => {
		open.value = false;
		message.success('保存成功');
		emit('save');
	});
};

</script>

<template>
	<a-drawer v-model:open="open" @cancel="open = false">
		<div class="mb10">
			服务项配置
		</div>
		<a-form-item label="照护等级" class="mr20 w-240">
			<a-select :options="levels" v-model:value="currentLevel"></a-select>
		</a-form-item>
		<ServiceContent :packageID="props.id" :level="currentLevel" @change="getServiceContent"></ServiceContent>
		<a-button type="primary" @click="savaConfig">保存</a-button>
		<a-button @click="open = !open">取消</a-button>
	</a-drawer>
	<a-button type="primary" @click="oepnConfig">配置照护内容</a-button>
</template>
<style scoped></style>
